import {useEffect ,useState} from "react";
 
//子组件
const SonComponent = (props) => {
  /*
  //只要有状态更新，就会执行
  useEffect(()=>{
    console.log('子组件更新')
  })
  */ 
  //只有第一次渲染的时候执行
  useEffect(()=>{
    console.log('子组件，请求接口.....')
  },[])

  return (
    <div>
      <h2>子组件</h2>
    </div>
  );
};
// 自定义hooks
function useWoodsHooks(){
  const [count,setCount]=useState(0);
  let otherMsg='父组件的参数'
 
  const handleClick=()=>{
    setCount(count+1)
    otherMsg='666'
  }
  return {count,handleClick,otherMsg}
}

function App() {
   const {count,handleClick,otherMsg}=useWoodsHooks()   
  
  // 只有第一次渲染的时候执行 + count有状态更新，才会执行
  useEffect(()=>{
    console.log('父组件更新'+count)

    if (count >= 3) {
      // 清理函数，当count大于3时执行
      return () => {
        
        console.log("销毁，因为count大于3");
      };
    }
  },[count])
  return (
      <div>
        <h1>{otherMsg} {count}</h1>
        <SonComponent/>
        <button onClick={handleClick}>
          刷新
        </button>
      </div>
    
  );
}

export default App;
